<template>
	<div class="acf-control">
		<span class="acf-control-name">
			AcFun
			<span v-show="sourceStore.audioName"> - {{sourceStore.audioName}}</span>
		</span>
		
		<div class="acf-control-btns">
			<UIIcon class="acf-control-btn" :icon="audioPaused ? 'play' : 'pause'" @click="audioPaused ? playAudio() : pauseAudio()"></UIIcon>
			<UIIcon class="acf-control-btn" icon="more" @click="openOpts"></UIIcon>
		</div>
		
		<div class="acf-control-other">ヾ(´〇｀)ﾉ♪♪♪</div>
	</div>
</template>

<script setup>
	
	import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue';
	import UIIcon from '@/ui/icon';
	import useOptsStore from './useOptsStore';
	import useSourceStore from './useSourceStore';
	import * as $audio from './audio';
	
	const props = defineProps({
		isReady: Boolean
	})
	
	const optsStore = useOptsStore();
	const sourceStore = useSourceStore();
	
	const audioPaused = ref(true);
	
	onMounted(() => {
		$audio.media.addEventListener('play', playEventHandle);
		$audio.media.addEventListener('pause', pauseEventHandle);
	})
	
	onBeforeUnmount(() => {
		$audio.media.removeEventListener('play', playEventHandle);
		$audio.media.removeEventListener('pause', pauseEventHandle);
	})
	
	function playAudio() {
		$audio.media.play();
	}
	
	function pauseAudio() {
		$audio.media.pause();
	}
	
	function playEventHandle() {
		audioPaused.value = false;
	}
	
	function pauseEventHandle() {
		audioPaused.value = true;
	}
	
	function openOpts() {
		optsStore.openMenu(optsStore.menuActive);
	}
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/material/text.scss';
	
	.acf-control {
		@include textShadow($color: #888);
		height: 40px;
		margin: 10px 0;
		display: grid;
		grid-template-columns: 1fr minmax(600px, 3fr) 1fr;
		place-content: center;
		place-items: center;
		padding: 0 20px;
		color: #fff;
		font-size: 24px;
		gap: 10px;
	}
	
	.acf-control-name {
		@include textClamp($clamp: 1);
		justify-self: start;
	}
	
	.acf-control-other {
		justify-self: end;
	}
	
	.acf-control-btn {
		cursor: pointer;
		&+& {
			margin-left: 20px;
		}
	}
	
</style>